<template>
    <div class="img-item">
        <div>
            <img :src="poster"/>
            <span class="cover"></span>
            <span v-if="item.score||item.sc">观众评分&nbsp;&nbsp;{{item.score||item.sc}}</span>
            <span v-else>{{item.wish?item.wish:wish}}人想看</span>
            <div v-if="isWish" class="like">
                <i class="iconfont icon-dianzan-aixinshixin"></i>
            </div>
        </div>
        <p class="name">{{item.name||item.nm||item.title}}</p>
        <p class="time" v-if="item.comingTitle">{{item.comingTitle|filtime}}</p>
    </div>
</template>

<script>
export default {
    props:{
        item:Object,
        isWish:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return{
            wish:0
        }
    },
    created(){
        if(!this.item.score && !this.item.wish){
            this.getwish();
        }
    },
    methods:{
        async getwish(){
            if(this.item.movieId){
                let re=await this.axios.get('movie/detail?movieid='+this.item.movieId);
                this.wish=re.data.movie.wish;
            }else{
                let re=await this.axios.get('movie/detail?movieid='+this.item.id);
                this.wish=re.data.movie.wish;
            }
        }
    },
    computed:{
        poster(){
            if(this.item.poster){
                return this.item.poster;
            }else{
                let sr=this.item.img;
                return sr.replace('w.h','85.115');
            }
        }
    },
    filters:{
        filtime(text){
            let index=text.indexOf(" ");
            return text.substring(0,index);
        }
    }
}
</script>

<style lang="less" scoped>
.img-item{
    margin-bottom: 10px;

    div{
        position: relative;

        img{
            display: block;
            width: 85px;
            height: 115px;
        }
        span{
            position: absolute;
            bottom: 2px;
            left: 4px;
            font-size: 12px;
            color: #faaf00;
            font-weight: 600;

            &.cover{
                bottom: 0;
                left: 0;
                display: inline-block;
                width: 100%;
                height: 35px;
                background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
            }
        }
        .like{
            position: absolute;
            left: 0;
            top: 0;
            width: 28px;
            height: 28px;
            border-radius: 0 0 10px 0;
            background-color: rgba(61, 63, 71, 0.6);
            text-align: center;
            line-height: 28px;

            i{
                font-size: 12px;
                color: #ffffffa6;
            }
        }
    }

    p{
        font-size: 12px;
        color: #999;
        padding: 7px 0px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &.name{
            font-size: 13px;
            color: #333;
            padding-bottom: 0px;
            font-weight: 600;
        }
    }
}
</style>